<div id="app" v-cloak>
    <el-card class="box-card">
        <el-form class="search" :inline="true" :model="vm" ref="vm" label-position="right" label-width="90px">
            <el-form-item label="日志类型" prop="logType">
                <el-select v-model="vm.logType" clearable size="mini" filterable placeholder="请输入日志类型">
                    <el-option key="系统错误" label="系统错误" value="系统错误"></el-option>
                    <el-option key="任务错误" label="任务错误" value="任务错误"></el-option>
                    <el-option key="业务错误" label="业务错误" value="业务错误"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="任务标题" prop="logTitle">
                <el-input v-model="vm.logTitle" @keyup.enter.native="onSearch" clearable size="mini" placeholder="请输入任务标题"></el-input>
            </el-form-item>
            <el-form-item label="日志状态" prop="logState">
                <el-select v-model="vm.logState" clearable size="mini" filterable placeholder="请输入日志状态">
                    <el-option key="0" label="待处理" value="0"></el-option>
                    <el-option key="1" label="处理中" value="1"></el-option>
                    <el-option key="2" label="已处理" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="开始日期" prop="startDate">
                <el-date-picker v-model="vm.startDate" clearable size="mini" placeholder="请输入开始日期" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束日期" prop="endDate">
                <el-date-picker v-model="vm.endDate" clearable size="mini" placeholder="请输入结束日期" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="mini" icon="el-icon-search" @click="onSearch">搜索</el-button>
                <el-button type="warning" size="mini" icon="el-icon-refresh-left" @click="onReset('vm')">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>

    <el-card class="box-card">
        <el-row type="flex" justify="space-between">
            <el-button-group>
                <el-button type="success" size="mini" icon="el-icon-shopping-cart-full" @click="onBatchStart">开始处理</el-button>

                <el-button type="warning" size="mini" icon="el-icon-circle-check" @click="onBatchFinish">处理结束</el-button>
            </el-button-group>

            <el-button-group>
                <el-tooltip effect="dark" content="解决" placement="bottom">
                    <el-button size="mini" icon="el-icon-shopping-cart-full" @click="onBatchStart"></el-button>
                </el-tooltip>

                <el-tooltip effect="dark" content="搁置" placement="bottom">
                    <el-button size="mini" icon="el-icon-circle-check" @click="onBatchFinish"></el-button>
                </el-tooltip>

                <el-tooltip effect="dark" content="刷新" placement="bottom">
                    <el-button size="mini" icon="el-icon-refresh" @click="onFind"></el-button>
                </el-tooltip>
            </el-button-group>
        </el-row>

        <el-table
                class="data"
                @selection-change="onSelectionChange"
                empty-text="无数据"
                :stripe="true"
                :data="result"
                size="mini">
            <el-table-column
                    align="center"
                    width="45"
                    type="selection">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="140"
                    prop="id"
                    label="主键">
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="100"
                    prop="logState"
                    label="日志状态">
                <template slot-scope="scope">
                    <el-tag size="mini" type="danger" effect="dark" v-if="scope.row.logState == '0'">待处理</el-tag>
                    <el-tag size="mini" type="warning" effect="dark" v-if="scope.row.logState == '1'">处理中</el-tag>
                    <el-tag size="mini" type="info" effect="dark" v-if="scope.row.logState == '2'">已处理</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="100"
                    prop="logType"
                    label="日志类型">
                <template slot-scope="scope">
                    <el-tag size="mini" v-if="scope.row.logType == '系统错误'">系统错误</el-tag>
                    <el-tag size="mini" v-if="scope.row.logType == '任务错误'">任务错误</el-tag>
                    <el-tag size="mini" v-if="scope.row.logType == '业务错误'">业务错误</el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="180"
                    prop="logTitle"
                    label="任务标题">
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="180"
                    prop="logNote"
                    label="日志描述">
            </el-table-column>
            <el-table-column
                    align="center"
                    min-width="140"
                    prop="createTime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    align="center"
                    width="150"
                    fixed="right"
                    label="操作">
                <template slot-scope="scope">
                    <wb-table-ops :arg="scope.row">
                        <wb-table-op v-if="scope.row.logState == '0'" value="开始处理" icon="el-icon-edit" @click="onStart"></wb-table-op>
                        <wb-table-op v-if="scope.row.logState == '1'" value="处理结束" icon="el-icon-edit" @click="onFinish"></wb-table-op>
                        <wb-table-op value="删除" icon="el-icon-delete" @click="onDelete"></wb-table-op>
                    </wb-table-ops>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                background
                v-if="vm.totalCount > vm.pageSize"
                style="margin-top: 10px"
                @current-change="onPageChange"
                @size-change="onPageSizeChange"
                :current-page="vm.pageNumber"
                :page-size="vm.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="vm.totalCount">
        </el-pagination>
    </el-card>
</div>
<script>
    var app = new Vue({
        mixins: [mixinForMgr],
        el: "#app",
        data: {
            module: 'wsys',
            target: 'logerr',
            vm: {//条件及分页参数
                logType: null,
                logTitle: null,
                logState: null,
                startDate: null,
                endDate: null,
                pageNumber: 1,
                pageSize: 10,
                totalCount: 0,
                sortKey: 'CREATE_TIME',
                sortType: 'DESC'
            }
        },
        methods: {
            onStart: function (item) {
                new Ajax("wsys", "logerr").update({
                    id: item.id,
                    logState: '1',
                    rowVersion: item.rowVersion
                },function (response) {
                    if (response.errors.length > 0) {
                        nav.e(response.errors[0].message);
                    } else {
                        nav.s("更新成功.");
                        this.onFind();
                    }
                }.bind(this))
            },
            onFinish: function (item) {
                new Ajax("wsys", "logerr").update({
                    id: item.id,
                    logState: '2',
                    rowVersion: item.rowVersion
                },function (response) {
                    if (response.errors.length > 0) {
                        nav.e(response.errors[0].message);
                    } else {
                        nav.s("更新成功.");
                        this.onFind();
                    }
                }.bind(this))
            },
            onBatchStart: function () {
                if (this.select.length == 0) {
                    nav.w("至少选中一项!");
                } else {
                    nav.tipShow("批量处理中...");
                    this.select.forAsync(function (item, next) {
                        new Ajax("wsys", "logerr").update({
                            id: item.id,
                            logState: '1',
                            rowVersion: item.rowVersion
                        }, function (response) {
                            if (response.errors.length > 0) {
                                nav.e(response.errors[0].message);
                            } else {
                                this.result.remove(item);
                            }
                            next();
                        }.bind(this))
                    }.bind(this), function () {
                        nav.tipClose();
                        nav.s("批量处理完成.")
                        this.onFind();
                    }.bind(this))
                }
            },
            onBatchFinish: function () {
                if (this.select.length == 0) {
                    nav.w("至少选中一项!");
                } else {
                    nav.tipShow("批量处理中...");
                    this.select.forAsync(function (item, next) {
                        new Ajax("wsys", "logerr").update({
                            id: item.id,
                            logState: '2',
                            rowVersion: item.rowVersion
                        }, function (response) {
                            if (response.errors.length > 0) {
                                nav.e(response.errors[0].message);
                            } else {
                                this.result.remove(item);
                            }
                            next();
                        }.bind(this))
                    }.bind(this), function () {
                        nav.tipClose();
                        nav.s("批量处理完成.")
                        this.onFind();
                    }.bind(this))
                }
            }
        },
        mounted: function () {
            this.onFind();
        }
    })
</script>
